<template>
  <div class="app-container">
    <el-card class="tree-card">
      <div slot="header" class="clearfix">
        <span>往来分类</span>
      </div>
      <toolbar @dialog="showDialog" :config="cateToolbarConfig" />
      <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
    </el-card>
    <el-card class="table-card ml-5">
      <div slot="header" class="clearfix">
        <toolbar @dialog="showDialog" :config="partnerToolbarConfig" />
      </div>
      <div class="table-container">
        <el-table :data="tableData" border size="mini">
          <el-table-column prop="date" label="日期" width="180"></el-table-column>
          <el-table-column prop="name" label="姓名" width="180"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
      </div>
      
      <pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        :total="400">
      </pagination>
    </el-card>

    <el-dialog
      :title="dialogTitle"
      width="50%"
      :visible.sync="dialogVisible"
      >
      <el-form :model="form" label-width="120px" size="small">
        <el-form-item label="上级分类" required>
          <el-input v-model="form.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import Toolbar from '@/components/Toolbar'
import Pagination from '@/components/Pagination'
export default {
  components: {
    Toolbar,
    Pagination
  },
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ],
      data: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1"
                }
              ]
            }
          ]
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1"
                }
              ]
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1"
                }
              ]
            }
          ]
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1"
                }
              ]
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1"
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      cateToolbarConfig: {
        data: [
          {
            'name': 'add',
            'route': '/basic/partner/cate/add'
          },
          {
            'name': 'edit',
            'route': '/basic/partner/cate/edit'
          },
          {
            'name': 'del',
            'route': '/basic/partner/cate/del'
          }
        ],
        type: 'cate'
      },
      partnerToolbarConfig: {
        data: [
          {
            'name': 'export',
            'route': '/basic/partner/export'
          },
          {
            'name': 'add',
            'route': '/basic/partner/cate/add'
          },
          {
            'name': 'del',
            'route': '/basic/partner/cate/del'
          },
          {
            'name': 'refresh',
            'route': '/basic/partner/index'
          }
        ],
        search: {
          enable: true,
          placeholder: '名称/助记码/简称/编码/手机'
        },
        type: 'table'
      },
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      dialogVisible: false,
      form: {},
      formLabelWidth: '120px',
      dialogTitle: '',
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    showDialog(event, text, type) {
      if (type == 'cate') {
        this.dialogTitle = text + '分类'
      } else {
        this.dialogTitle = text + '往来单位'
      }
      this.dialogVisible = true
      console.log(event)
      console.log(type)
    }
  }
};
</script>
<style lang="scss">
.tree-card {
  flex: 0 0 200px;

  .el-card__header {
    border-color: #76a4d8;
    padding: 10px 20px;
    font-size: 15px;
    .clearfix {
      height: 20px;
      line-height: 20px;
    }
  }
  .el-card__body {
    padding: 0 10px 5px 10px;
    height: calc(100% - 40px);
  }
}

.el-form {
  label {
    font-weight: normal;
  }
}
</style>